<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="../yl/index.css" />
    <link rel="stylesheet" href="../yl/style.css" />
    <link rel="stylesheet" href="../style/free.css" />
    <title>调查问卷</title>
    <style>
        .el-select__wrapper {
            box-shadow: 0 0 0 1px var(--el-border-color) inset !important;
            background-color: var(--el-fill-color-blank) !important;
        }

        .el-form-item__label {
            justify-content: flex-start;
        }
    </style>
</head>

<body>
    <div id="app" v-cloak>
        <el-form :model="form" ref="form" style="width: 100%; height: calc(100vh - 120rem); overflow: auto;">
            <div class="m-2 rounded flex flex-column">
                <el-form-item
                    :rules="[{ required: true, message: '请输入您认为北红村目前最需要完善的公共服务是（可多选，最多选 3 项）', trigger: 'change' }]"
                    prop="A1" class="m-2 flex flex-column">
                    <template #label>
                        <span class="font flex-shrink">1.您认为北红村目前最需要完善的公共服务是（可多选，最多选 3 项）:</span>
                    </template>
                    <el-radio-group v-model="form.A1">
                        <el-radio :label="item"
                            v-for="(item,index) in ['本村常住人口（居住满 1 年及以上）','本村季节性居住村民（如仅冬季 / 夏季居住）','外来务工 / 创业人员（在本村工作 / 经营满 3 个月及以上）','游客（本次为短期到访，停留不超过 7 天）']"
                            :key="index"></el-radio>
                    </el-radio-group>
                </el-form-item>
            </div>
        </el-form>
        <div class="fixed-bottom flex justify-center w-100 bg-white shadow" style="height: 120rem; ">
            <div @click="handleSubmit" class=" m-2 bg-info rounded-circle w-100 flex justify-center align-center"
                v-cloak>
                <span class="text-white">提交表单</span>
            </div>
        </div>
    </div>
    <script src="../utils/utils.js"></script>
    <script src="../utils/mixins.js"></script>
    <script src="../config/config.js"></script>
    <script src="../yl/vue.js"></script>
    <script src="../yl/index.js"></script>
    <script src="../yl/zh-cn.mjs"></script>
    <script src="../yl/index.iife.min.js"></script>
    <script src="../yl/jquery.min.js"></script>
    <script src="../utils/jquery.cookie.js"></script>
    <script src="../api/request.js"></script>
    <script src="../utils/jweixin.js"></script>
    <script>
        const App = {
            data() {
                return {
                    form: {

                    },
                }
            },
            beforeCreate() {
                document.title = "“洁净家园・网格治理” 志愿清扫行动";
                function setRem() {
                    const designWidth = 750; // 设计稿宽度（rpx）
                    const maxWidth = 540; // 可选：限制最大宽度（如手机端常见值）
                    const screenWidth = Math.min(window.innerWidth, maxWidth);
                    const scale = screenWidth / designWidth;
                    document.documentElement.style.fontSize = scale + 'px';
                }
                setRem();//1rem = 0.5px 对标小程序在 375px 宽的屏幕上，1rpx = 0.5px（因为 750rpx / 375px = 2）
                window.addEventListener('resize', setRem);
            },
            mounted() {
                let URL = window.location.href;
                this.form.Questionnaire_SerialNumber = getQueryObject(URL, 'nodeKey');
            },
            methods: {
                async validateAllForms() {
                    //获取当前页面上所有的Elform
                    let forms = [];
                    for (let key in this.$refs) {
                        const ref = this.$refs[key];
                        if (ref.$options && ref.$options.name == 'ElForm') {
                            forms.push(ref);
                        }
                    }
                    //判断每个Elform的校验是否通过
                    let isfail = false;
                    for (const form of forms) {
                        try {
                            await form.validate();
                        } catch (error) {
                            isfail = true;
                        }
                    }
                    if (isfail) {
                        return false;
                    }
                    return true;
                },
                async handleSubmit() {
                    const allValid = await this.validateAllForms();
                    if (allValid && !this.loading) {
                        this.loading = true;
                        const Points = "2";
                        let form = deepClone(this.form);
                        $.ajax({
                            headers: requestHeaders(),
                            url: `${mh}/population/getPersonalPoint`,
                            method: "GET",
                            success: (personal_points_account) => {
                                let lJSONObject_DataSet = new Object();
                                let personal_points_change_log = {
                                    ID_Card_Number: '',
                                    Points_Title: '填写调查问卷获取积分',
                                    Points_Type: '0',
                                    Change_Points: Points,
                                    Notes: '填写调查问卷获取积分',
                                }

                                if (personal_points_account.length == 1) {//有账户
                                    const Total_Points = accAdd(personal_points_account[0].Total_Points, Points);
                                    const Remain_Points = accAdd(personal_points_account[0].Remain_Points, Points);
                                    personal_points_account[0].Total_Points = Total_Points;
                                    lJSONObject_DataSet = {
                                        Add: {
                                            questionnaire_form1761026811957: [form],
                                            personal_points_change_log: [{
                                                ...personal_points_change_log,
                                                Remain_Points,
                                            }],
                                        },
                                        Modify: {
                                            personal_points_account,
                                        }
                                    }
                                } else {//无账户
                                    lJSONObject_DataSet = {
                                        Add: {
                                            questionnaire_form1761026811957: [form],
                                            personal_points_change_log: [{
                                                ...personal_points_change_log,
                                                Remain_Points: Points
                                            }],
                                            personal_points_account: [{
                                                ID_Card_Number: '',
                                                Points_Type: '0',
                                                Total_Points: Points,
                                                Remain_Points: Points,
                                                Sales_Points: '0'
                                            }]
                                        },
                                    }
                                }
                                this.submitSave(lJSONObject_DataSet, (res) => {
                                    if (res.Status == 'success') {
                                        window.history.back();
                                    }
                                    this.loading = false;
                                })
                            },
                            complete: (XMLHttpRequest) => {
                                if (XMLHttpRequest.status == 302) {
                                    wx.miniProgram.navigateTo({
                                        url: miniProgram,
                                    })
                                }
                            },
                            dataType: "json"
                        })



                    }
                },
                submitSave(Data, response) {
                    const websocket = new WebSocketClient();
                    websocket.init({
                        url: ws + '/generalSave/' + getCookie('token'),
                        onopen: () => {
                            let lJSONObject_DataSet = {
                                Data, AccessToken: getCookie('token'),
                                replaceParameter: "ID_Card_Number",
                            }
                            websocket.send(JSON.stringify(lJSONObject_DataSet));
                        },
                        onmessage: (data) => {
                            try {
                                const res = JSON.parse(data);
                                websocket.close();
                                if (res.REDIRECT && res.REDIRECT == 'REDIRECT') {//重定向
                                    wx.miniProgram.navigateTo({
                                        url: miniProgram,
                                    })
                                } else {
                                    response ? response(res) : null;
                                }
                            } catch (error) { }
                        },
                    })
                }
            },
        };

        const { createApp } = Vue;
        const app = createApp(App);
        //这种方式是引入全部图标，无需单个引入
        for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
            app.component(key, component);
        }
        const ElMessage = ElementPlus.ElMessage;
        app.use(ElementPlus, { locale: zhCn });
        app.mount("#app");
    </script>
</body>

</html>